<template>
    <div class="tabs">
        <div
            v-for="(item, index) in list"
            :key="index"
            :ref="'tab' + index"
            v-show="item.show"
            class="tab"
            :class="{ 'tab-s': value == index }"
            :style="{ paddingBottom: bottom + 'px' }"
            @click="setValue(index)"
        >
            {{ item.name }}
        </div>
        <div
            class="line"
            :style="{
                left: lineLeft + 'px',
                width: line + 'px',
                bottom: bottom + 'px',
            }"
        ></div>
    </div>
</template>

<script>
export default {
    name: "tabs",
    components: {},
    model: {
        prop: "value", // 默认是value
        event: "input", // 默认是input
    },
    props: {
        value: Number,
        list: {
            type: Array,
            default: function () {
                return [];
            },
        },
        line: {
            type: Number,
            default: 24,
        },
        bottom: {
            type: Number,
            default: 27,
        },
    },
    data() {
        return {
            lineLeft: 0,
        };
    },
    mounted() {
        this.tabsClick(this.value);
    },
    watch: {
        value(n, o) {
            this.tabsClick(n);
        },
    },
    methods: {
        setValue(index) {
            this.$emit("input", index);
        },
        tabsClick(index, item) {
            let target = this.$refs["tab" + index][0];
            this.lineLeft =
                target.offsetLeft + (target.offsetWidth - this.line) / 2;
        },
    },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1499px) {
    .tabs {
        width: 1200px !important;
    }
}
.tabs {
    position: relative;
    width: 1450px;
    margin: 0 auto;
    padding-top: 22px;
    display: flex;
    align-items: center;

    .tab {
        font-size: 18px;
        color: #333333;
        height: 50px;
        line-height: 50px;
        margin: 0 24px;
        cursor: pointer;
        box-sizing: content-box;

        &:hover {
            opacity: 0.8;
            color: #1c87f3;
        }
    }

    .tab-s {
        color: #1c87f3;
        font-weight: 600;
    }

    .line {
        position: absolute;
        height: 2px;
        left: 0;
        background: #1c87f3;
        transition: left 0.2s;
    }
}
</style>